import React, { Component } from "react";
import CheckList from "./CheckList";

class Card extends Component {
  state = {
    showDetails: false,
  };
  toggleDetail = (event) => {
    console.log("111111");
    this.setState({
      showDetails: !this.state.showDetails,
    });
  };
  render() {
    let cardDetails;
    if (this.state.showDetails) {
      cardDetails = (
        <div className="card_details">
          {this.props.description}
          <CheckList
            cardId={this.props.id}
            tasks={this.props.tasks}
          ></CheckList>
        </div>
      );
    }
    return (
      <div
        className="card"
        onClick={(e) => {
          console.log("222222222222222");
          this.toggleDetail(e);
        }}
      >
        <div
          className={
            this.state.showDetails
              ? "card_title card_title--is-open"
              : "card_title"
          }
        >
          {this.props.title}
        </div>
        {cardDetails}
      </div>
    );
  }
}
export default Card;
